<template>
  <a-modal
    v-model:open="visible"
    :mask-closable="false"
    width="55%"
    title="关联材料"
    :dialog-style="{ top: '20px' }"
    :footer="null"
  >
    <div v-if="visible" v-loading="loading">
      <vxe-grid
        resizable
        show-overflow
        :show-footer="true"
        highlight-hover-row
        keep-source
        row-id="id"
        :expand-config="{ expandAll: true }"
        :columns="materialTableColumn"
        :toolbar-config="toolbarConfig"
        :data="formData.materials"
        :footer-data="footerData"
        :height="450"
        :scroll-y="{
          enabled: true,
          gt: 0,
        }"
      >
        <!-- 替代品 -->
        <template #replacements_default="{ row }">
          <a-card>
            <vxe-grid
              resizable
              show-overflow
              highlight-hover-row
              keep-source
              row-id="id"
              :columns="materialTableColumn.filter((item) => item.type !== 'expand')"
              :toolbar-config="toolbarConfig"
              :data="row.replacements"
              :height="200"
            />
          </a-card>
        </template>
      </vxe-grid>
    </div>
  </a-modal>
</template>

<script setup>
  import { getCurrentInstance, ref } from 'vue';
  import * as api from '@/api/base-data/make';
  // this对象
  const instance = getCurrentInstance();

  const visible = ref(false);

  // 加载中
  const loading = ref(false);

  const props = defineProps({
    makeId: {
      type: String,
      required: true,
    },
  });

  const formData = ref({});

  const materialTableColumn = ref([
    {
      title: '替代',
      type: 'expand',
      field: 'expand',
      width: 80,
      align: 'center',
      slots: { content: 'replacements_default' },
    },
    {
      field: 'type',
      title: '类别',
      width: 80,
      formatter: ({ cellValue }) => (cellValue === 0 ? '主材料' : '替代材料'),
    },
    {
      field: 'productName',
      title: '原料名称',
      minWidth: 160,
    },
    { field: 'code', title: '原料编码', width: 100 },
    { field: 'skuCode', title: '原料SKU', width: 100 },
    { field: 'spec', title: '原料规格', minWidth: 120 },
    {
      field: 'unitName',
      title: '消耗单位',
      width: 100,
    },
    {
      field: 'consumeNum',
      title: '消耗数量',
      width: 120,
    },
    {
      field: 'consumeCost',
      title: '成本价',
      minWidth: 140,
    },
  ]);

  const toolbarConfig = ref({
    zoom: false,
    refresh: false,
    custom: false,
    // 自定义左侧工具栏
    slots: {
      buttons: 'toolbar_buttons',
    },
  });

  const footerData = ref([
    {
      expand: '合计',
      type: '-',
      productName: '',
      code: '',
      skuCode: '',
      spec: '',
      consumeUnitId: '',
      consumeNum: 0,
      consumeCost: 0,
    },
  ]);

  const initFormData = () => {
    formData.value = {
      name: '',
      description: '',
      materials: [],
    };
    calcSum();
  };

  const loadFormData = () => {
    loading.value = true;
    api
      .get(props.makeId)
      .then((data) => {
        formData.value = data;
        calcSum();
      })
      .finally(() => {
        loading.value = false;
      });
  };

  const calcSum = () => {
    footerData.value[0].productName = formData.value.materials.reduce(
      (sum, item) => sum + (item?.replacements.length || 0) + 1,
      0,
    );
    footerData.value[0].consumeNum = formData.value.materials.reduce(
      (sum, item) => sum + (item?.consumeNum || 0),
      0,
    );
    footerData.value[0].consumeCost = formData.value.materials.reduce(
      (sum, item) => sum + (item.consumeCost || 0),
      0,
    );
  };

  // 打开弹窗
  const openDialog = () => {
    visible.value = true;
    initFormData();
    loadFormData();
  };

  // 组件实例对象
  const _This = () => {
    return instance.appContext.config.globalProperties;
  };

  defineExpose({
    openDialog,
  });
</script>

<style scoped></style>
